<template>
  <c-view>
    <template v-slot:header>
      <div class="title">
        {{ $route.meta.title }}
      </div>
    </template>
    <div class="main__box">
      <c-table
        ref="cTable"
        selection
        hasBorder
        :max-height="maxHeight"
        :size="size"
        :loading="isLoading"
        :table-header="tableHeader"
        :table-list="tableList"
        :table-inner-btns="tableInnerBtns"
        :page-info="pageInfo"
        @selection-handle="checkedSelectionHandle"
        @change-pagination="changePagination"
      >
        <template v-slot:header>
          <c-search :form-model="searchObj" :form-items="searchItems" @submit-form="searchSubmit" @reset-form="searchReset"></c-search>
          <!-- <el-button-group class="btn-group">
            <el-button type="primary" @click="refundHandle">批量打款</el-button>
          </el-button-group> -->
        </template>
      </c-table>
    </div>
  </c-view>
</template>

<script>
import mixinTable from 'mixins/table'
import utils from 'utils'
import dictObj from '@/store/dictData'

export default {
  name: 'refundFinance',
  mixins: [mixinTable],
  data(vm) {
    return {
      ids: [], //选中的退款项
      tableInnerBtns: [
        {
          name: '退款',
          icon: 'el-icon-view',
          notBtn: row => row.status === '1' || row.status === '2' || row.status === '3' || row.status === '4' || row.status === '6',
          handle(row) {
            vm.confirmTip('确定退款打款', () => {
              vm.confirmRefund(row.id)
            })
          }
        }
      ],
      // 表格内操作按钮
      tableHeader: [
        {
          label: '所属区域',
          prop: 'cityName'
        },
        {
          label: '退款单号',
          prop: 'refundOrderId'
          // search: {
          //   type: 'input'
          // }
        },
        {
          label: '退款金额',
          prop: 'money',
          formatter: row => row && utils.formatMoney(row.money)
        },
        {
          label: '退款申请人',
          prop: 'name',
          search: {
            type: 'input'
          }
        },
        {
          label: '退款手机号',
          prop: 'refundCustomerPhone'
        },
        {
          label: '退款类型',
          prop: 'refundType',
          formatter: row => (row && row.refundType === 'D' ? '押金' : '余额')
        },
        {
          label: '账户类型',
          prop: 'repayType',
          formatter: row => row && vm.setTableColumnLabel(row.repayType, 'repayTypeList')
        },
        {
          label: '退款状态',
          prop: 'status',
          formatter: row => row && vm.setTableColumnLabel(row.status, 'refundStatusList'),
          search: {
            type: 'dict',
            optionsList: dictObj.refundStatusList
          }
        },
        {
          label: '创建时间',
          prop: 'createTime',
          width: 160
        },
        {
          label: '结束时间',
          prop: 'finallyHandleTime',
          width: 160
        }
      ]
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    /*
     * 查询表格列表数据
     */
    fetchData() {
      const { pageNo, pageSize } = this.pageInfo
      const { dateTime, ...other } = this.searchObj
      const searchDate = this.getSearchDate(dateTime)
      this.isLoading = true
      this.$api.member
        .fetch('customerRefundLogList', {
          isFinance: 10,
          ...searchDate,
          ...other,
          rows: pageNo,
          offset: pageSize
        })
        .then(res => {
          this.isLoading = false
          if (res && res.totalCount) {
            const { data, totalCount } = res
            this.pageInfo.totalNum = totalCount
            this.tableList = data || []
          } else {
            this.tableList = res || []
          }
        })
    },
    checkedSelectionHandle(val) {
      let ids = []
      let status = false
      val.forEach(res => {
        if (status === false && res.status !== '5' && res.status !== '6') {
          status = true
        } else {
          ids.push(res.id)
        }
      })
      if (status) {
        return this.$msgTip('请选择退款中或退款失败的单据', 'warning')
      } else {
        this.ids = ids
      }
    },
    refundHandle() {
      if (!this.ids.length) {
        return this.$msgTip('请先选中退款人员', 'warning')
      }
      const ids = this.ids
      utils.confirmTip(`确认批量退款${ids.length}条数据`, () => {
        this.confirmRefund(ids.join(','))
      })
    },
    confirmRefund(ids) {
      this.$api.member.fetch('remitCustomerRefund', { ids }).then(() => {
        this.responeHandle('退款成功')
      })
    }
  }
}
</script>
